<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>分类页面</title>
	</head>
	<body>
	<!--导航-->
	<nav th:replace="_fragments :: menu(2)">

	</nav>
		<!--中间内容--->
		<div class="m-padded-tb-big m-container-small">
         <div class="ui container">
         	<!----header--->
					<div class="ui top attached segment">
						<div class="ui middle aligned two column grid">
							<div class="column">
								<h3 class="ui teal header">分类</h3>
							</div>
							<div class=" right aligned column">
								共<h2 class="ui orange header m-inline-block m-text-thin" th:text="${#arrays.length(types)}"> 14 </h2>个
							</div>
						</div>
					</div>
             <div class="ui attached segment m-padded-tb-large">
             	<div class="ui labeled button m-margin-tb-tiny" th:each="type : ${types}">
             		<a class="ui basic  button " th:href="@{/types/{id}(id=${type.id})}" th:text="${type.name}" th:classappend="${type.id==activeTypeId} ? 'teal'">思考与感悟</a>
             		<div class="ui basic  left pointing label" th:classappend="${type.id==activeTypeId} ? 'teal'" th:text="${#arrays.length(type.blogs)}">24</div>
             	</div>
             </div>
             <div class="ui teal segment">
             	<div class="ui top attached  segment" >
						<div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear" th:each="blog : ${page.content}">
							<div class="ui mobile reversed stackable grid">
								<div class="eleven wide column">
									<h3 class="ui header"><a href="#"  th:href="@{/blog/{id}(id=${blog.id})}" class="m-black" target="_blank" th:text="@{blog.title}">你真的理解什么是财富自由吗?</a></h3>
									<p class="m-text" th:text="|${blog.description}.....|"> 正 确 做好任何一件事情的前提是清晰   、  正确的理解目标      。    而事实事,我们很多人根本没有对目标正确定义   ,   甚   至  根本从来没有想过,只是大家都那么做而已....</p>
								<div class="ui  grid">
									<div class="eleven wide column">
										<div class="ui mini horizontal link list">
											<div class="item">
												<img src="https://unsplash.it/100/100?image=1005" class="ui avatar image" alt="" th:src="@{${blog.user.avatar}}">
											    <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">侯泽宇</a></div>
											</div>
										    <div class="item">
										    	<i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-11-05</span>
										    </div>
										    <div class="item">
										    	<i class="eye icon"></i> <span th:text="${blog.views}">1234</span>
										    </div>
										</div>
									</div>
									<div class="right aligned five wide column">
										<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin" th:text="${blog.type.name}">认识升级</a>
									</div>
								</div>
								</div>
								<div class="five wide column">
									<a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}">
										<img src="https://unsplash.it/800/450?image=1005" class="ui rounded image" alt="" th:src="@{${blog.firstPicture}}">
									</a>
								</div>
							</div>
						</div>
					</div>
					<!---footer--->
				 <div class="ui bottom attached segment" th:if="${page.totalPages}>1">
					 <div class="ui middle aligned two column grid">
						 <div class="column">
							 <a href="#" th:href="@{/(page=${page.number}-1)}"  th:unless="${page.first}" class="ui mini teal basic button">上一页</a>
						 </div>
						 <div class="right aligned column">
							 <a href="#" th:href="@{/(page=${page.number}+1)}"  th:unless="${page.last}" class="ui mini teal basic button">下一页</a>
						 </div>
					 </div>
				 </div>

             </div>
         </div>
		</div>
		<!--底部footer--->
	  <footer th:replace="_fragments :: footer" >

	</footer>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
		<script type="text/javascript">
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
		</script>
	</body>
</html>
